<template>
  <div class="add-student">
    <title1></title1>
    <Navigation></Navigation>
    <el-row class="cards-container" :gutter="20">
      <!-- 添加学生信息卡片 -->
      <el-col :span="12">
      <el-card class="box-card">
        <h2>添加学生信息</h2>
        <el-form :model="form" :rules="rules" ref="addStudentForm" label-width="120px" class="form">
          <el-form-item label="学号" prop="studentNo">
            <el-input v-model="form.studentNo" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="性别" prop="gender">
            <el-select v-model="form.gender" placeholder="请选择性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="班级" prop="class">
            <el-input v-model="form.class" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="专业" prop="major">
            <el-input v-model="form.major" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" autocomplete="off"></el-input>
          </el-form-item>

          <!-- 新增密码字段 -->
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="form.password"
              type="password"
              autocomplete="off"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
      <!-- 批量导入学生信息卡片 -->
    <el-col :span="12">
      <el-card class="box-card">
        <h2>批量导入学生信息</h2>
        <el-upload
          class="upload-demo"
          drag
          action="/api/admin/importStudents"
          accept=".csv"
          :on-success="handleBatchSuccess"
          :on-error="handleBatchError"
          :before-upload="beforeUpload"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div slot="tip" class="el-upload__tip">仅支持CSV文件，大小不超过2MB</div>
        </el-upload>
        <el-button type="primary" @click="submitBatch">导入</el-button>
      </el-card>
    </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import Navigation from '@/components/navigation_adm.vue';
import title1 from '@/components/title.vue';

export default {
  name: 'AdmAddStu',
    components: {
        Navigation,
        title1,
    },
  data() {
    return {
      form: {
        studentNo: '',
        name: '',
        gender: '',
        class: '',
        major: '',
        email: '',
        password: '', // 新增密码字段
      },
      rules: {
        studentNo: [
          { required: true, message: '请输入学号', trigger: 'blur' },
          { pattern: /^\d+$/, message: '学号必须为数字', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' },
        ],
        class: [
          { required: true, message: '请输入班级', trigger: 'blur' },
        ],
        major: [
          { required: true, message: '请输入专业', trigger: 'blur' },
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change'] },
        ],
        password: [ // 新增密码验证规则
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能少于6位', trigger: 'blur' },
        ],
      },
      // 批量导入相关数据
      uploadFile: null,
    };
  },
  methods: {
    submitForm() {
      this.$refs.addStudentForm.validate(async (valid) => {
        if (valid) {
          try {
            const response = await axios.post('/api/admin/addStudent', this.form);
            if (response.data.success) {
              ElMessage.success('学生信息添加成功');
              this.resetForm();
            } else {
              ElMessage.error(response.data.message || '添加失败');
            }
          } catch (error) {
            ElMessage.error('网络错误，请稍后再试');
            console.error(error);
          }
        } else {
          ElMessageBox.alert('开发中，请稍候(#^.^#)')
        }
      });
    },
    resetForm() {
      this.$refs.addStudentForm.resetFields();
    },
    beforeUpload(file) {
      const isCSV = file.type === 'text/csv';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isCSV) {
        ElMessage.error('只能上传CSV文件!');
      }
      if (!isLt2M) {
        ElMessage.error('文件大小不能超过2MB!');
      }
      return isCSV && isLt2M;
    },
    handleBatchSuccess(response, file, fileList) {
      if (response.success) {
        ElMessage.success('批量导入成功');
      } else {
        ElMessage.error(response.message || '批量导入失败');
      }
    },
    handleBatchError(err, file, fileList) {
      ElMessage.error('批量导入失败，请稍后再试');
      console.error(err);
    },
    submitBatch() {
      if (this.uploadFile) {
        this.$refs.upload.submit();
      } else {
        ElMessageBox.alert('请先选择要导入的CSV文件(开发中)');
      }
    },
  },
  mounted() {
    document.title = '管理员后台系统';
  },
};
</script>

<style scoped>
.add-student {
  padding: 20px;
  width:80%;
}

.cards-container {
    /* position:fixed; */
    left:100px;
    top:50px;

}

.form {
  max-width: 100%;
  margin: 0 auto;
}

.upload-demo i {
  font-size: 28px;
  color: #1890ff;
}
.upload-demo .el-upload__text {
  margin-top: 10px;
  font-size: 14px;
  color: #bfbfbf;
}
.upload-demo .el-upload__tip {
  font-size: 12px;
  color: #bfbfbf;
}

/* 确保卡片在大屏幕下各占一半 */
@media (min-width: 768px) {
  .cards-container .el-col {
    display: flex; /* 确保卡片高度一致 */
    justify-content: center;
  }
  
  .cards-container .el-col .box-card {
    width: 100%; /* 让卡片占满列 */
  }
}
</style>